<template>
  <div class="top-handle-bar">
    <a-space>
      <mars-icon icon="send" width="20" @click="flyToGraphic" title="飞行定位"></mars-icon>
      <mars-icon icon="delete" width="20" @click="deleteEntity" title="删除"></mars-icon>
      <mars-icon icon="export" width="20" @click="getGeoJson" title="导出geojson"></mars-icon>
      <mars-icon icon="save" width="20" @click="saveGraphicInfo" title="保存"></mars-icon>
    </a-space>
  </div>
  <div class="attr-editor-main">
    <!-- <graphic-info :style="style" :layerName="layerName" :customType="customType" :graphicType="graphicType" @styleChange="styleChange" /> -->
    <table class="mars-primary-table" border="1" bordercolor="#ffffff" cellspacing="0" cellpadding="0">
      <tr>
        <td>名称</td>
        <td><mars-input v-model:value="formState.name" :allowClear="true" /></td>
      </tr>
      <!-- <tr>
        <td>编号</td>
        <td><mars-input v-model:value="formState.code" :allowClear="true" /></td>
      </tr> -->
      <tr>
        <td>类型</td>
        <td><mars-select v-model:value="formState.type" :options="typeOptions"></mars-select></td>
      </tr>
    </table>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, toRaw, reactive, watch } from "vue"
import _ from "lodash"
import GraphicInfo from "./graphic_info.vue"
import * as mapWork from "./map"
import useLifecycle from "@mars/widgets/common/uses/use-lifecycle"
import { useWidget } from "@mars/widgets/common/store/widget"
const { currentWidget } = useWidget()
// console.log('currentWidget: ', currentWidget);

const layerName = ref("")
const customType = ref("")
const graphicType = ref("")
const style = ref(null)
const props = defineProps({
  graphic: {
    type: Object,
    default: () => ({})
  }
})

const graphic = reactive(props.graphic)

onMounted(() => {
  // editGraphic = currentWidget.data.graphic
  console.log('关联图形:', currentWidget)
})

console.log('开始编辑图形:', graphic)
const formState = ref({
  id: graphic.options.id,
  name: graphic.name,
  type: ''
  // 其他初始值
})

const emit = defineEmits(['onSave']);

// 下拉列表数据
const typeOptions = [
  {
    value: "area",
    label: "地块",
    style: { scale: 1, url: "//data.mars2d.cn/gltf/mars/jingche/jingche.gltf" }
  },
  {
    value: "address",
    label: "地点",
    style: { scale: 1, url: "//data.mars2d.cn/gltf/mars/jingche/jingche.gltf" }
  },
  {
    value: "camera",
    label: "摄像头",
    style: { scale: 1, url: "//data.mars2d.cn/gltf/mars/qiche.gltf" }
  },
  {
    value: "temperature_sensor",
    label: "温度传感器",
    style: { scale: 1, url: "//data.mars2d.cn/gltf/mars/jingche/jingche.gltf" }
  },
  {
    value: "humidity_sensor",
    label: "湿度传感器",
    style: { scale: 1, url: "//data.mars2d.cn/gltf/mars/jingche/jingche.gltf" }
  },
  {
    value: "soil_sensor",
    label: "土壤传感器",
    style: { scale: 1, url: "//data.mars2d.cn/gltf/mars/jingche/jingche.gltf" }
  }

]

// 启用map.ts生命周期
useLifecycle(mapWork)

// 监听 graphic 的变化来更新 formState
watch(() => graphic.name, (newName) => {
  formState.value.name = newName
})

onMounted(() => {
  updataLayer()
})

// 监听到矢量数据发生变化
function updataLayer() {
  if (!graphic) {
    return
  }

  layerName.value = graphic._layer.name || ""
  graphicType.value = graphic.type
  style.value = _.cloneDeep(graphic.style)
}

// 样式修改
function styleChange(style: any) {
  style = toRaw(style)
  // console.log("修改了style样式", style)
  graphic.setStyle(style)
}

// *********************  删除定位保存文件方法  ******************* //
function getGeoJson() {
  const geojson = graphic.toGeoJSON() // 文件处理

  mapWork.downloadFile("标绘item.json", JSON.stringify(geojson))
}

function flyToGraphic() {
  mapWork.flyToGrapgic(graphic) // 事件处理
}

function deleteEntity() {
  graphic.remove() // 删除
}

function saveGraphicInfo() {
  // console.log('formState:', formState)
  emit('onSave', formState);
}
</script>
<style lang="less" scoped>
.top-handle-bar {
  border-bottom: 1px solid #cde1de;
  padding: 5px 0 2px 0;

  :deep(.mars-icon) {
    cursor: pointer;
  }
}

.attr-editor-main {
  height: calc(100% - 40px);
  overflow-y: auto;

  :deep(*) {
    font-size: 12px;
  }
}

:deep(.ant-tabs-nav) {
  margin: 0;
}

:deep(.ant-select),
:deep(.ant-input-number) {
  width: 100%;
}
</style>
